<template>
	<div class="content">
                <div class="content-title">我们的服务 (Our Services)</div>
                <div class="content-body">
                    <!-- 仓储运输一体化服务 -->
                    <div class="service-section">
                        <h3><i class="fas fa-warehouse"></i> 仓储、包装、分拣、配送运输一体化物流管理解决方案</h3>
                        <p>公司采用"以需求分析为指导"的项目管理模式，确保项目实施完成和客户的满意度。公司专注客户项目业务运作，提供仓储管理服务，提供货物中转、分拣、包装、配送、运输一体化物流管理解决方案。在各大城市设有大型仓储/中转中心，协调管理货物跟踪查询运作环境。</p>
                    </div>
                    
                    <!-- 全国配送服务 -->
                    <div class="service-section">
                        <h3><i class="fas fa-truck"></i> 全国各地泛珠江三角区域等物流配送</h3>
                        <p>项目运营、发货提货、物流专线、同城快运、专车配送、仓储服务是公司的主营业务。公司以广州为中心，辐射华南、华东、华中、华北、西南、西北、东北等全国各大城市及二三线城市及中转县镇城市，推动泛珠三角和长三角的网点和互动。设立了广泛、细密的网络物流配送服务体系。</p>
                        <p>客户产品除了重点城市、一级城市的发展外，也会逐步不断拓展、辐射到二、三线城市及偏远地区，因此城际之间、同城区域之间发货、配送、运输，将成为客户综合物流配送计划及项目操作解决方案的首选。</p>
                    </div>
                    
                    <!-- 特色服务网格 -->
                    <div class="services-grid">
                        <!-- 国际运输 -->
                        <div class="service-card">
                            <div class="service-card-header">
                                <i class="fas fa-plane"></i> 国际、国内货物运输
                            </div>
                            <div class="service-card-body">
                                <div class="service-card-item">
                                    <i class="fas fa-check-circle"></i> 全国航空运输服务
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-check-circle"></i> 铁路货物运输
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-check-circle"></i> 公路多式联运服务
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-check-circle"></i> 国际货运代理
                                </div>
                            </div>
                        </div>
                        
                        <!-- 配套服务 -->
                        <div class="service-card">
                            <div class="service-card-header">
                                <i class="fas fa-plus-circle"></i> 其他相关增值服务
                            </div>
                            <div class="service-card-body">
                                <div class="service-card-item">
                                    <i class="fas fa-exchange-alt"></i> 全国各地货物调拨
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-money-bill-wave"></i> 运费到付
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-hand-holding-usd"></i> 代收货款
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-file-signature"></i> 签单返回
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-calendar-alt"></i> 活动布展、巡展、撤展
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-server"></i> 信息对接
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-calendar-check"></i> 预约派送
                                </div>
                            </div>
                        </div>
                        
                        <!-- 专车服务 -->
                        <div class="service-card">
                            <div class="service-card-header">
                                <i class="fas fa-route"></i> 专线专车服务
                            </div>
                            <div class="service-card-body">
                                <div class="service-card-item">
                                    <i class="fas fa-fire"></i> 急件快运
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-car"></i> 定车配送
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-boxes"></i> 大型设备运输
                                </div>
                                <div class="service-card-item">
                                    <i class="fas fa-snowflake"></i> 冷链运输
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 保险服务 -->
                    <div class="service-section">
                        <h3><i class="fas fa-shield-alt"></i> 保险代理服务</h3>
                        <p>公司与中国人民财产保险公司建立了长期合作,根据客户提供的货物价值，保险保价，为客户代理货物保险业务。</p>
                    </div>
                    
                    <!-- 包装服务 -->
                    <div class="service-section">
                        <h3><i class="fas fa-box-open"></i> 包装服务</h3>
                        <p>提供各种抗压纸箱、防水纤维袋等包装材料;各式木格、木箱、木工打包服务。</p>
                    </div>
                    
                    <!-- 服务产品介绍 -->
                    <div class="service-section">
                        <h3><i class="fas fa-user-tie"></i> 服务产品介绍</h3>
                        <p>为客户项目业务提供莱比特工作人员驻站服务。以客户利益为中心，根据客户的需求和特点，制定专业服务方案，追求实现超出客户预期的满意服务。</p>
                        
                        <div class="service-features">
                            <div class="feature-item">
                                <div class="feature-title"><i class="fas fa-network-wired"></i> 整合资源</div>
                                <div class="feature-desc">分拨物流，最后一公里普遍性物流；转运物流；门店配送，最后一公里个性化和高品质服务。</div>
                            </div>
                            
                            <div class="feature-item">
                                <div class="feature-title"><i class="fas fa-map-marked-alt"></i> 区域专送</div>
                                <div class="feature-desc">针对特定区域的专业配送服务，确保时效性与安全性。</div>
                            </div>
                            
                            <div class="feature-item">
                                <div class="feature-title"><i class="fas fa-headset"></i> 专属客服</div>
                                <div class="feature-desc">为VIP客户提供一对一专属客服，及时解决物流问题。</div>
                            </div>
                            
                            <div class="feature-item">
                                <div class="feature-title"><i class="fas fa-chart-line"></i> 数据分析</div>
                                <div class="feature-desc">提供物流数据分析报告，帮助客户优化供应链管理。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</template>

<script>
	export default {
		name: 'ServicesContent',
	}
</script>
<style scoped>
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
	* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        
        
        .container {
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 20px;
            margin-bottom: 40px;
        }
        
        /* 位置指示 */
        .breadcrumb {
            margin-bottom: 20px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            color: #666;
        }
        
        /* 主体布局 */
        .main-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        /* 左侧导航 */
        .sidebar {
            flex: 0 0 250px;
            background-color: #941C1B;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .sidebar-title {
            background-color: #941C1B;
            color: white;
            padding: 12px 15px;
            font-weight: bold;
            font-size: 18px;
            text-align: center;
        }
        
        .sidebar-menu {
            list-style-type: none;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .sidebar-menu a {
            display: block;
            padding: 12px 20px;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .sidebar-menu a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        .sidebar-menu a.active {
            background-color: #941C1B;
            font-weight: bold;
        }
        
        .sidebar-menu a.active:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background-color: white;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #eee;
			width: 55%;
			margin: 0 24%;
        }
        
        .content-title {
            background-color: #f0f0f0;
            padding: 15px 20px;
            font-size: 24px;
            font-weight: bold;
            color: #941C1B;
            border-bottom: 2px solid #941C1B;
        }
        
        .content-body {
            padding: 20px;
        }
        
        .service-section {
            margin-bottom: 30px;
            position: relative;
        }
        
        .service-section h3 {
            color: #941C1B;
            margin-bottom: 15px;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        
        .service-section h3 i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .service-section p {
            margin-bottom: 15px;
            text-align: justify;
            padding-left: 30px;
        }
        
        .service-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .feature-item {
            background-color: #f9f9f9;
            border-left: 3px solid #941C1B;
            padding: 15px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .feature-title {
            font-weight: bold;
            color: #941C1B;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .feature-title i {
            margin-right: 8px;
        }
        
        .feature-desc {
            font-size: 14px;
            color: #555;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .service-card {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        }
        
        .service-card-header {
            background: linear-gradient(135deg, #941C1B 0%, #941C1B 100%);
            color: white;
            padding: 12px 15px;
            font-weight: bold;
        }
        
        .service-card-body {
            padding: 15px;
            background-color: #fcfcfc;
        }
        
        .service-card-item {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
            display: flex;
            align-items: center;
        }
        
        .service-card-item:last-child {
            border-bottom: none;
        }
        
        .service-card-item i {
            color: #941C1B;
            margin-right: 8px;
            width: 20px;
        }
        
        /* 底部功能区 */
        .functional-area {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .login-box, .tracking-box {
            flex: 1;
            border: 2px solid #941C1B;
            border-radius: 8px;
            padding: 20px;
            background-color: white;
        }
        
        .section-title {
            color: #941C1B;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        .form-group input, 
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #941C1B;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #941C1B;
        }
        
        .tracking-note {
            margin-top: 15px;
            font-size: 12px;
            color: #777;
            font-style: italic;
        }
</style>